<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/4/25
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <title>执行计划</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/js/jquery.qrcode.min.js"></script>

</head>
<body>
<form class="layui-form" action=""  id="qrcode_id" lay-filter="updateUserFormFilter" style="display: none">
    <div id="qrcode"></div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="form_qrcode">关闭</button>
        </div>
    </div>
</form>


<form class="layui-form" action=""  id="saveUserForm" lay-filter="updateUserFormFilter" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label" >计划名</label>
        <div class="layui-input-block">
            <input type="text" name="plan_name"  id="plan_name" required  lay-verify="required" placeholder="请输入计划名" autocomplete="off" class="layui-input"  lay-filter="plan_name">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >状态</label>
        <div class="layui-input-block">
            <input type="text" name="plan_state"  id="plan_state" required  lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input"  lay-filter="plan_name">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >邀请码</label>
        <div class="layui-input-block">
            <input type="text" name="plan_invite_code"  id="plan_invite_code" required  lay-verify="required" placeholder="请输入计划名" autocomplete="off" class="layui-input"  lay-filter="plan_name">
        </div>
<%--        <input type="button" name="invite_code" value="生成邀请码" onclick="only_one()">--%>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开始时间</label>
        <div class="layui-input-block">
            <input type="date" name="startTime" id="startTime" required  lay-verify="required" placeholder="请选择开始时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-block">
            <input type="date" name="endTime" id="endTime" required  lay-verify="required" placeholder="请选择结束时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSaveUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<div style="margin-bottom: 20px;">
    <form >
        <label>
            <input type="text" name="name">
        </label>
        <label for="query_scl"></label><select id="query_scl" name="query_scl">
        <option value="scl_no">题目编号</option>
        <option value="scl_content">题目内容</option>
    </select>
        <label>
            <button data-type="query_scl">查询</button>
        </label>
    </form>
</div>

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">删除选中行</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
    <button class="layui-btn" data-type="addDate">添加</button>
</div>

<table id="demotest" class="layui-table" lay-data="{url: '${pageContext.request.contextPath}/plan?method=findAll',
               page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    , curr: 1 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                }}"  lay-filter="demotest">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'plan_id', width:80, sort: true, fixed: true}">id</th>
        <th lay-data="{field:'plan_name', width:80, sort: true, fixed: true}">计划名</th>
        <th lay-data="{field:'plan_creator', width:180}">创建者</th>
        <th lay-data="{field:'plan_invite_code', width:80, sort: true}">邀请码</th>
        <th lay-data="{field:'plan_state', width:180}">状态</th>
        <th lay-data="{field:'startTime', width:180}">开始时间</th>
        <th lay-data="{field:'endTime', width:180}">结束时间</th>
        <th lay-data="{field:'createTime', width:180}">创建时间</th>
        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">二维码</a>
</script>




<script>
    //生成邀请码
    function getRandom () {
        var str=['0','1','2','3','4','5','6','7','8','9']
        var code1='';
        for(var i=0;i<8;i++){
            var i1 = Math.floor(Math.random()*9)
            code1=code1+str[i1];
        }
/*        $.ajax({
            url:"${pageContext.request.contextPath}/plan?method=only_one"
            ,data:{"code1":code1}
            ,type:"post"
            ,success:function (res){
                code1=res;
            }
        })*/
        return code1;
    }

    //
    layui.use(['table','form','upload'], function(){
        var table = layui.table;
        var form = layui.form;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demotest)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                var index=layer.open({
                    title: '二维码',
                    type: 1,
                    content: $('#qrcode_id'),
                    area: ['300px', '300px']
                });
                $('#qrcode').qrcode({
                    render: "canvas",//
                    width: 200,
                    height: 200,
                    foreground: "green",
                    background: "#FFF",
                    text: "http://localhost:8080/w_j_h_war_exploded/viwes/whj/front/login.jsp"// 扫描二维码跳转到的页面是哪里
                });
                form.on('(form_qrcode)',function (){
                    layer.close(index);
                })
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.get("${pageContext.request.contextPath}/plan?method=del"
                        ,{"plan_id":data.plan_id},function (num){
                            if(num!=="0"){
                                obj.del();
                                layer.close(index);
                            }
                        })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    title: '修改计划',
                    type: 1,
                    content: $('#saveUserForm'),
                    area: ['500px', '300px']
                });
                form.val('updateUserFormFilter', {
                    "plan_name":data.plan_name
                    ,"plan_state":data.plan_state
                    ,"plan_invite_code":getRandom()
                    ,"startTime": data.startTime
                    ,"endTime":data.endTime

                });
                form.on('submit(formSaveUser)', function(data){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/plan?method=update",
                        dataType:"JSON",
                        data:{
                            "plan_id":obj.data.plan_id
                            ,"plan_state":$("#plan_state").val()
                            ,"plan_name":$("#plan_name").val()
                            ,"plan_invite_code":$("#plan_invite_code").val()
                            ,"startTime": $("#startTime").val()
                            ,"endTime":$("#endTime").val()
                        },
                        success:function (ret) {

                            if(ret.code===0){
                                layer.closeAll();
                                /*                                table.reload('demotest', {
                                                                    page: {
                                                                        curr: 1
                                                                    } //重新从第 1 页开始
                                                                });*/
                            }
                            //layer.msg(ret.message);
                        }
                    });
                    table.reload('demotest', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可
                });
                layui.form.on('submit(name)', function(data){
                    alert(1111)
                });
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                let list=[];
                for (let i = 0; i < data.length; i++) {
                    list.push(data[i].id);
                }
                //layer.alert(JSON.stringify(data));
                //layer.alert(JSON.stringify(list));
                $.get("${pageContext.request.contextPath}/ShowServlet?method=delAll",{"list":JSON.stringify(list)},function (sname){
                    if(sname>0){
                        layer.alert("删除成功");
                    }
                })
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
            ,addDate:function (){
                layer.open({
                    title: '添加',
                    type: 1,
                    content: $('#saveUserForm'),
                    area: ['500px', '300px']
                });
                form.val('updateUserFormFilter', {
                    "plan_state":"0"
                    ,"plan_name":""
                    ,"plan_invite_code":getRandom()
                    ,"startTime": ""
                    ,"endTime":""
                });

                form.on('submit(formSaveUser)', function(data){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/plan?method=addScl",
                        dataType:"JSON",
                        data:{"plan_state":$("#plan_state").val()
                            ,"plan_name":$("#plan_name").val()
                            ,"plan_invite_code":$("#plan_invite_code").val()
                            ,"startTime": $("#startTime").val()
                            ,"endTime":$("#endTime").val()
                        },
                        success:function (ret) {

                            if(ret.code===0){

                                layer.closeAll();
                                // table.reload('demo', {
                                //     page: {
                                //         curr: 1
                                //     } //重新从第 1 页开始
                                // });
                            }
                            //layer.msg(ret.message);
                        }
                    });
                    table.reload('demotest', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    },true);
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可
                });
                form.on('submit(name)', function(data){
                    alert(1111)
                });
            }
            ,query_scl:function (){
                alert(2222222)
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });


</script>

</html>
